<template>
	<div class="wrapper">
		<swiper :options="swiperOption">
		    <swiper-slide 
			v-for="item of headerImg" 
			:key="item.id">
				<img :src="item.imgUrl" class="swiper-img">
			</swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
export default {
	name: 'homeSwiper',
	data(){
		return {
			headerImg: [
				{
					id:"535334",
					imgUrl:"https://pic5.40017.cn/03/000/d5/6b/rB5oQFx4846ATjD9AAMGEUvrZHQ915_520x218_00.jpg"
				},
				{
					id:"53533",
					imgUrl:"https://pic5.40017.cn/03/000/28/73/rB5oQFxG7M2AOgxwAADChAKgVcA559_520x218_00.jpg"
				},
				{
					id:"53334",
					imgUrl:"https://pic5.40017.cn/01/000/31/71/rBANC1sy7-iAaElXAADxiWL4LPo263_520x218_00.jpg"
				},
				{
					id:"53534",
					imgUrl:"https://pic5.40017.cn/02/001/c9/be/rBLkCFuPUXiAcueUAAMZ98pP6YI670_520x218_00.jpg"
				}
			],
			swiperOption:{
				pagination: '.swiper-pagination',
				loop:true
			}
		}
	}
}
</script>

<style>
	.swiper-img {
		width: 100%;
		height: 3rem;
	}
	.swiper-pagination-bullet{
		background: #FFFFFF;
	}
</style>
